//AQI指数趋势统计页面
<template>
  <!-- 面包屑导航，展示页面路径 -->
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>AQI空气质量指数超标趋势统计</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 显示AQI空气质量指数超标趋势统计的标题 -->
  <el-alert
    title="AQI空气质量指数超标趋势统计"
    type="success"
    effect="dark"
    :closable="false"
    style="width: 80%; margin: 20px 0"
  />

  <!-- 表格容器，显示AQI指数超标趋势统计数据 -->
  <div class="table-box">
    <!-- 显示AQI指数超标趋势统计的表格 -->
    <el-table
      :data="aqiTrendTotalArr"
      :cell-style="{ padding: '4px' }"
      empty-text="无数据"
      style="width: 100%"
    >
      <!-- 序号列，显示行号 -->
      <el-table-column label="序号">
        <template #default="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>

      <!-- 表格列，显示月份 -->
      <el-table-column prop="month" label="月份" />

      <!-- 表格列，显示AQI超标数量 -->
      <el-table-column prop="total" label="AQI空气指数指数超标数量" />
    </el-table>
  </div>
</template>

<script setup>
// 从Vue引入需要的功能
import { ref, inject } from "vue";

// 注入全局的axios实例，用于发送HTTP请求
const axios = inject("axios");

// 定义响应式数据aqiTrendTotalArr，用于存储从后端获取的AQI超标趋势数据
const aqiTrendTotalArr = ref([]);

// 初始化函数，用于发送请求从后端获取AQI超标趋势统计数据
const init = () => {
  // 发送POST请求到后端API获取数据
  axios
    .post("statistics/listAqiTrendTotalStatis")
    .then((response) => {
      aqiTrendTotalArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
.table-box {
  width: 80%;
  height: 450px;
  overflow: auto;
}
</style>

<!--AQI空气质量指数超标趋势统计-->
<!--http://localhost:8080/nepm/statistics/listAqiTrendTotalStatis-->
<!--传参：空-->
<!--返回：response对象-->
<!--绑定到的响应式对象：-->
<!--数据渲染方式-->
<!--使用el-table组件渲染表格数据-->
<!--通过:data="aqiTrendTotalArr"将响应式数组绑定到表格-->
<!--表格包含三列：-->
<!--序号列（使用scope.$index+1动态生成行号）-->
<!--month列（显示月份）-->
<!--total列（显示AQI超标数量）-->
<!--使用empty-text="无数据"设置当数据为空时的提示文本-->
<!--通过CSS设置了表格容器的样式（80%宽度，450px高度，带滚动条）-->


